<template>
	<view class="main">
		<u-navbar :is-back="true" title="新建活动" :background="background" back-icon-color="#000000" title-color="#000"
			title-bold="true"></u-navbar>
		<view class="all" v-if="details!=''">
			<view class="content">
				<view class="shop">
					<image :src="details.image" mode=""></image>
					<view class="shop_r">
						<view class="shop_tit">
							{{details.name}}
						</view>
						<view class="status">
							{{details.on_sale==1?'在售中':'已下架'}}
						</view>
						<view class="money">
							¥{{details.minPrice}}-{{details.maxPrice}}
						</view>
					</view>
				</view>

			</view>
			<view class="type">
				<view class="tit">
					规格
				</view>
				<view class="selects" @click="block">
					<text>{{style==''?'请选择':style}}</text>
					<u-icon name="arrow-right"></u-icon>
				</view>
			</view>
			<view class="type">
				<view class="tit">
					规格价格
				</view>
				<view class="money">
					<text>¥{{typemoney==''?0:typemoney}}</text>
				</view>
			</view>
			<view class="detailes">
				<view class="type">
					<view class="tit">
						活动价格
					</view>
					<view class="center">
						<text>¥</text>
						<input type="number" v-model="actprice" />
					</view>
				</view>
				<view class="type">
					<view class="tit">
						活动数量
					</view>
					<view class="nums">

						<view class="pad" @click="both(2)">
							<u-icon name="minus"></u-icon>
						</view>
						<!-- 		<view class="pad bord" >
							<text>{{num}}</text>
						</view> -->
						<view class="pad bord inp">
							<input type="number" @input="nums" v-model="num" />
						</view>
						<view class="pad" @click="both(1)">
							<u-icon name="plus"></u-icon>
						</view>
					</view>
				</view>
			</view>
		</view>
		<view class="type">
			<view class="tit">
				活动时间
			</view>
			<view class="alltime">
				<view class="times" @click="selectdate(1)">
					<text>{{startdate==''?'开始时间':startdate}}</text>
					<u-icon name="arrow-right"></u-icon>
				</view>
				<text>至</text>
				<view class="times" @click="selectdate(2)">
					<text>{{enddate==''?'结束时间':enddate}}</text>
					<u-icon name="arrow-right"></u-icon>
				</view>
			</view>
		</view>
		<view class="type" v-if="details==''">
			<view class="tit">
				适用商品
			</view>
			<view class="selects" @click="router">
				<text>请选择商品</text>
				<u-icon name="arrow-right"></u-icon>
			</view>
		</view>
		<view :class="details!=''?'confirm2':'confirm'" @click="submit">
			发布活动
		</view>
		<u-calendar v-model="show" :mode="mode" @change="change" :min-date="mindate" max-date="3000-12-31"></u-calendar>
		<u-select v-model="gg" mode="mutil-column" value-name="specs" label-name="name" :list="list" @confirm="confirm">
		</u-select>
	</view>
</template>
<script>
	export default {
		data() {
			return {
				background: {
					backgroundColor: '#fff'
				},
				mode: 'date',
				type: '',
				show: false,
				flag: false,
				details: '',
				startdate: '',
				enddate: '',
				indes: '',
				num: 1,
				actprice: 0,
				gg: false,
				list: [],
				style: '',
				typelist: '',
				styleid: '',
				typemoney: '',
				uptype: '',
				mindate:''


			}
		},
		onLoad() {
			this.mindate=this.dateFormat(new Date())

		},
		mounted() {

		},
		onShow() {},
		methods: {
			dateFormat(time) {
							let date = new Date(time);
							let year = date.getFullYear();
							// 在日期格式中，月份是从0开始的，因此要加0，使用三元表达式在小于10的前面加0，以达到格式统一  如 09:11:05
							let month = date.getMonth() + 1 < 10 ? "0" + (date.getMonth() + 1) : date.getMonth() + 1;
							let day = date.getDate() < 10 ? "0" + date.getDate() : date.getDate();
							let hours = date.getHours() < 10 ? "0" + date.getHours() : date.getHours();
							let minutes = date.getMinutes() < 10 ? "0" + date.getMinutes() : date.getMinutes();
							let seconds = date.getSeconds() < 10 ? "0" + date.getSeconds() : date.getSeconds();
							// 拼接
							return year + "-" + month + "-" + day ;
						
						},
			//confirm确认规格
			submit() {
				var start = new Date(this.startdate).getTime()
				var end = new Date(this.enddate).getTime()
				if (this.details=='') {
					uni.showToast({
						title: '请选择商品',
						icon: 'none',
						duration: 700
					})
				}else if(end < start ){
					uni.showToast({
						title: '时间区间选择错误',
						icon: 'none',
						duration: 700
					})
				}else if (this.style == '' || this.actprice == 0 || this.startdate == '' || this.enddate == '') {
					uni.showToast({
						title: '请将数据填写完整',
						icon: 'none',
						duration: 700
					})
				} else {
					global.$http.request({
						url: '/shopapi/activity/singleAdd',
						data: {
							token: uni.getStorageSync('token'),
							start: this.startdate,
							end: this.enddate,
							good_id: this.details.id,
							kucun: this.num,
							price: this.actprice,
							sku: this.uptype
						}
					}).then(res => {
						console.log(res);
						if (res.data.code == 200) {
							uni.showToast({
								title: res.data.msg,
								icon: 'none',
								duration: 700
							})
							setTimeout(function() {
								let pages = getCurrentPages(); // 当前页面
								let beforePage = pages[pages.length - 2]; // 前一个页面
								uni.navigateBack({
									delta: 1,
									success: function() {
										beforePage.onLoad(); // 执行前一个页面的onLoad方法
									}
								})
							}, 700)
						}
					})
				}

			},
			confirm(e) {
				console.log(e);
				if (e.length == 2) {
					this.style = e[0].label + ',' + e[1].label
					this.styleid = e[0].value + ',' + e[1].value
				} else {
					this.style = e[0].label
					this.styleid = e[0].value
				}
				console.log('选择的id', this.styleid);
				// var that = this
				var list1 = []
				var list2 = []
				for (var a in this.typelist) {
					list1.push(a)
					list2.push(this.typelist[a])
				};
				console.log(list1);
				console.log(list2);
				for (let i = 0; i < list1.length; i++) {
					if (list1[i] == this.styleid) {
						this.uptype = list1[i]
						this.typemoney = list2[i]
						break
					}
				}
			},


			//控制输入数量不小于1
			nums(e) {
				if (Number(e.detail.value) <= 1) {

					uni.showToast({
						title: '最小数量1',
						icon: 'none',
						duration: 1000
					})
					this.num = 1
				}
				console.log(e);
			},
			//商品数量
			both(index) {
				console.log(index);
				if (index == 1) {
					this.num = Number(this.num) + Number(1)
					// if(this.num<=1){
					// 	this.num = 1
					// }
				} else if (index == 2) {
					this.num = Number(this.num) - Number(1)
					if (this.num <= 1) {
						this.num = 1
						uni.showToast({
							title: '最小数量1',
							icon: 'none',
							duration: 1000
						})
					}
				}
			},
			block() {
				this.gg = true
			},
			router() {
				var that = this;
				uni.navigateTo({
					url: '../select_shop/select_shop',
					events: {
						//自定义一个监听器名, data为选择页面返回的数据
						selectType(data) {
							that.details = data
							console.log('返回值', that.details);
							for (let i = 0; i < that.details.specs_type.length; i++) {
								that.list.push(that.details.specs_type[i].specs)
							}
							that.typelist = that.details.specs_choose

						}
					}
				})
			},

			//显示组件
			selectdate(index) {
				if (index == 1 || index == 2) {
					this.show = true,
						this.indes = index
				}
			},
			//选择的两个时间段
			change(e) {
				if (this.indes == 1) {
					this.startdate = e.result
				} else if (this.indes == 2) {

					this.enddate = e.result

				}
			},

		}
	}
</script>
<style lang="scss">
	page {
		font-family: PingFang SC;
		width: 750rpx;
		margin: 0 auto;

		background-color: #f7f7f7;

		.main {
			width: 750rpx;
			margin: 0 auto;

			.all {
				.content {
					background-color: #fff;
					padding: 25rpx 25rpx 0 25rpx;

					.shop {
						padding-bottom: 40rpx;
						display: flex;

						image {
							width: 180rpx;
							height: 180rpx;
						}

						.shop_r {
							padding-left: 26rpx;

							.shop_tit {
								font-size: 28rpx;
								font-weight: 400;
								color: #000000;
							}
						}

						.status {
							padding: 32rpx 0 17rpx 0;
							font-size: 24rpx;
							font-weight: 400;
							color: #FF0707;
						}

						.money {
							font-size: 24rpx;
							font-weight: 400;
							color: #010101;
						}
					}
				}

				.detailes {
					margin: 11rpx 0;

					.nums {
						display: flex;
						border: 1px solid #E2E2E2;
						border-radius: 5px 0px 0px 5px;

						.pad {
							padding: 20rpx;
							text-align: center;
						}

						.bord {
							border-left: 1px solid #E2E2E2;
							color: #FE0000;

							text {
								display: block;
								width: 50rpx;
							}

							border-right: 1px solid #E2E2E2;

							input {
								width: 50rpx;
								text-align: center;
							}
						}

					}

					.type {
						margin: 0;

						.center {
							font-size: 28rpx;
							font-weight: 400;
							color: #FF0000;
							display: flex;
							align-items: center;

							input {
								margin-left: 5rpx;
								text-align: left;
								width: 80rpx;
							}
						}
					}

				}
			}

			.type {
				display: flex;
				align-items: center;
				justify-content: space-between;
				padding: 41rpx 19rpx;
				margin-top: 10rpx;
				background-color: #fff;

				.selects {
					font-size: 28rpx;
					font-weight: 400;
					color: #B3B3B3;
					display: flex;
				}

				.alltime {
					text {
						padding: 0 11rpx;
					}

					display: flex;
					align-items: center;

					.times {
						width: 220rpx;

						padding: 15rpx 11rpx;
						background: #FFFFFF;
						border: 2rpx solid #808080;
						border-radius: 22rpx;
						display: flex;
						align-items: center;
						justify-content: space-between;

						font-size: 22rpx;
						font-family: PingFang SC;
						font-weight: 400;
						color: #808080;
					}
				}

				.tit {
					font-size: 30rpx;
					font-weight: bold;
					color: #060606;
				}

				input {
					width: 60%;
					text-align: right;
				}

				.nums {
					display: flex;
					border: 1px solid #E2E2E2;
					border-radius: 5px 0px 0px 5px;

					.pad {
						padding: 20rpx;
						text-align: center;
					}

					.bord {
						border-left: 1px solid #E2E2E2;
						color: #FE0000;
						border-right: 1px solid #E2E2E2;
					}
				}
			}

			.confirm {
				width: 690rpx;
				background: #808080;
				border-radius: 49px;
				position: absolute;
				bottom: 30rpx;
				left: 30rpx;
				text-align: center;
				padding: 34rpx 0;
				font-size: 32rpx;
				font-weight: 400;
				color: #FFFFFF;
			}

			.confirm2 {
				width: 690rpx;
				background: #FE4E00;
				border-radius: 49px;
				position: absolute;
				bottom: 30rpx;
				left: 30rpx;
				text-align: center;
				padding: 34rpx 0;
				font-size: 32rpx;
				font-weight: 400;
				color: #FFFFFF;
			}
		}
	}
</style>
